<template>
  <div class="bg-gray-500 h-screen">
    <el-button size="large" class="fixed bottom-0 left-72" @click="per"
      >上一章</el-button
    >
    <el-button size="large" class="fixed bottom-0 right-72" @click="next"
      >下一章</el-button
    >
    <div
      class="w-64 h-72 bg-white fixed top-0 left-32 overflow-y-auto px-2 no-scroll"
    >
      <div class="sticky top-0 bg-white center font-semibold">
        章节(共{{ muLuList.length }}章)
      </div>
      <div
        v-for="item in muLuList"
        :key="item.chapterId"
        class="flex justify-between p-1 cursor-pointer hover:bg-slate-200"
        @click="changePage(item)"
        :class="
          item.chapterNumber == typeObj.chapterNumber ? 'bg-slate-200' : ''
        "
      >
        <div>{{ "第" + item.chapterNumber + "章" }}</div>
        <div>{{ item.chapterName }}</div>
      </div>
      <el-empty v-if="muLuList.length == 0" description="暂时为空" />
    </div>
    <div
      class="mx-auto h-full overflow-y-auto no-scroll bg-white"
      style="width: 700px"
    >
      <div class="bg-white px-4 sticky top-0 center">
        {{ typeObj.comicName + "(第" + typeObj.chapterNumber + "章)" }}
      </div>
      <img
        v-for="item in pageList"
        :key="item.pageId"
        class="w-full"
        :src="'/api' + item.pageStorage"
      />
      <el-empty v-if="pageList.length == 0" description="暂时为空" />
    </div>
  </div>
</template>
<script setup>
import request from "@/axios/http";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const muLuList = ref([]);
const pageList = ref([]);
onMounted(() => {
  getMuLuList();
  getPageList();
});
const typeObj = ref({
  comicName: route.query.name,
  chapterNumber: route.query.chapterNumber,
});

const per = () => {
  if (typeObj.value.chapterNumber == 1) {
    return ElMessage.info("已经是第一章");
  }
  typeObj.value.chapterNumber = parseInt(typeObj.value.chapterNumber) - 1;
  getPageList();
};
const next = () => {
  if (typeObj.value.chapterNumber == muLuList.value.length) {
    return ElMessage.info("已经是最后一章");
  }
  typeObj.value.chapterNumber = parseInt(typeObj.value.chapterNumber) + 1;
  getPageList();
};
const changePage = (item) => {
  typeObj.value.chapterNumber = item.chapterNumber;
  getPageList();
};
const getMuLuList = () => {
  request({
    url: "chapter/selectChapter",
    method: "post",
    data: {
      pageNum: 1,
      pageSize: 100,
      data: {
        comicName: typeObj.value.comicName,
        // "chapterNumber":1
      },
    },
  }).then((res) => {
    if (res.code == 200) {
      muLuList.value = res.data;
    } else {
    }
  });
};
const getPageList = () => {
  request({
    url: "comicPage/getAllPage",
    method: "post",
    data: {
      pageNum: 1,
      pageSize: 100,
      data: {
        comicName: typeObj.value.comicName,
        chapterNumber: typeObj.value.chapterNumber,
      },
    },
  }).then((res) => {
    if (res.code == 200) {
      pageList.value = res.data;
    } else {
    }
  });
};
</script>
<style></style>
